<template>
  <div class="layout-header">
    <div class="layout-header-content">
      <a-layout-header class="layout-header-row-1">
        <div class="layout-header-logo">L o g o影视</div>
        <div class="layout-header-seek">
          <div class="layout-header-search">
            <a-input-search placeholder="搜索喜欢的电影、电视剧.."
                            enter-button
                            v-model="search_kw"
                            @search="onSearch" />
            <div class="search-p-box" v-show="search_list.length">
              <div v-for="item in search_list">{{item}}</div>
            </div>
          </div>
          <div class="layout-header-hot-list">
            <span>暖阳之下</span>
            <span>好好生活</span>
            <span>为你千千万万遍</span>
            <span>燃烧大地</span>
            <span>突围</span>
            <span>一生一世</span>
          </div>
        </div>
        <div class="layout-header-user">
          <div @click="to_page('login-enter')" class="layout-header-user-me">
            <a-icon type="user" />
            <span>立即登陆</span>
          </div>
          <div @click="to_page('history-watch')"  class="layout-header-user-hs">
            <a-icon type="video-camera" />
            <span>观看记录</span>
          </div>
          <div @click="to_page('download')" class="layout-header-user-d">
            <a-icon type="android" />
            <span>下载APP</span>
          </div>
        </div>
      </a-layout-header>

      <a-layout-header  class="layout-header-menu">
        <a-menu
          :default-selected-keys="[$route.path]"
          mode="horizontal">
          <a-menu-item v-for="item in list" :key="item.classify === 'main' ? '/' : '/' + item.classify">
            <nuxt-link :to="`${item.classify === 'main' ? '/' : '/' + item.classify}`">{{ item.name }}</nuxt-link>
          </a-menu-item>
        </a-menu>
      </a-layout-header>
    </div>
    <div class="layout-header-flx"></div>
  </div>
</template>

<script>
export default {
  name: "com-header",

  data() {
    return {
      search_list: [],
      search_kw: '',
    }
  },

  created() {
    if( this.$route.query.kw ) {
      this.search_kw = this.$route.query.kw;
    }
  },

  watch: {
    search_kw: {
      handler: function (v) {
        if( this.$route.query.kw !== v) {
          this.on_suggest()
        }
      },
    }
  },

  props: {
    list: {
      type: Array,
      default() {
        return [
          {"name": "首页", "classify": "main"},
          {"name": "电视剧", "classify": "serial"},
          {"name": "电影", "classify": "film"},
          {"name": "综艺", "classify": "variety"},
          {"name": "动漫世界", "classify": "cartoon"},
          // {"name": "筛选", "classify": "category-type"},
        ]
      }
    }
  },

  methods: {
    onSearch() {
      this.$router.push({path: '/search'})
    },

    async on_suggest() {
      if(this.search_kw === '') {
        this.search_list = [];
        return;
      }

      const res = await this.$api_parse360.suggest(this.search_kw)
      if(res.status === 200) {
        this.search_list = res.list;
      }
    },
    to_page(path) {
      this.$router.push({path})
    }
  }

}
</script>

<style lang="scss" >
.layout-header {
  .layout-header-content {
    height: 120px;
    position: fixed;
    z-index: 1;
    width: 100%;
    border-bottom: 2px solid $success-color;
  }

  .layout-header-flx {
    @include wh( 100%, 120px);
  }

  &-row-1 {
    background: $white;
    display: flex;
    //align-items: center;
    justify-content: space-between;
    align-content: center;
    @include wh(100%, 80px);
  }

  &-logo {
    font-size: 22px;
    font-weight: bold;
  }

  &-seek {
    @include wh(600px, 80px);
    input {
      border-color: $success-color;
      //border-width: 2px;
      border-radius: 30px;
    }
  }

  &-hot-list {
    line-height: 1.5;
    @include wh(100%, 28px);
    span {
      margin: 4px;
      cursor: pointer;
      &:hover {
        color: $success-color;
      }
    }
  }

  &-search {
    display: block;
    margin: 10px 0;
    .ant-btn-primary {
      border-color: $success-color;
      background: $success-color;
    }
  }

  &-user {
    display: flex;
    >div {
      margin: 0 10px;
      cursor: pointer;
      &:hover {
        color: $success-color;
      }
    }
  }

  &-menu {
    height: 40px;
    line-height: 40px;
    border-top: 1px solid $explain-color;
    background: $input-color-disable;
    .ant-menu {
      @include wh;
      line-height: 40px;
      background: transparent;
    }
  }
}
</style>
